<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('订单号')}}：</p>
        <el-input v-model="order_id" :placeholder="$t('请输入订单号')"></el-input>
      </div>
      <!-- <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('代理商')}}：</p>
        <el-input v-model="agent" :placeholder="$t('请输入代理商名字')"></el-input>
      </div> -->
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(1)">
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent(1)">{{ $t("清除") }}</button>
      </div>
      <div class="div_box u-f u-f-ac" style="margin-left:5px">
        <p class="label font14 text_black">{{ $t("所属商户") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList(1)">
          <p class="text-ellipsis">{{ merchant ? merchant : $t("选择商户") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearMerchant(1)">{{ $t("清除") }}</button>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb" style="margin-left: 10px;">
        <p class="label font14 text_black">{{$t('手机号')}}：</p>
        <el-input v-model="phone" :placeholder="$t('请输入代理商手机号')"></el-input>
      </div>
      <div class="date_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("时间") }}：</p>
        <el-date-picker
          v-model="dates"
          type="datetimerange"
          :picker-options="pickerOptions"
          unlink-panels
          :range-separator="$t('至')"
          :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
        <!-- <p class="tip font14 text_danger">{{ $t("只能选择一个月的范围") }}</p> -->
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{$t('状态')}}：</p>
        <el-select
          v-model="clientVal"
          :placeholder="$t('请选择')"
          @change="clientChange"
        >
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
        {{$t('提交')}}
      </button>
      <button class="sub_btn font14 text_white bg_blue" style="margin-left: 10px;" @click="logExcelA('excel')">
        {{$t('导出')}}
      </button>
    </div>
    <p class="head_tip font14 text_danger">
      {{$t('订单产生分成三个自然后才进行结算')}},{{$t('72小时内的订单可以撤销')}},{{$t('撤销订单后')}},
      {{$t('订单金额会退回用户余额')}},{{$t('所有代理佣金也将撤销')}}
    </p>

    <div>
      <el-table :data="tableData">
        <el-table-column
          prop="order_no"
          :label="$t('订单号')"
          width="200"
        ></el-table-column>
        <el-table-column prop="name" :label="$t('用户名称')"></el-table-column>
        <el-table-column
          prop="ratio"
          :label="$t('提成比')"
        >
          <template slot-scope="{row}">
            <span>{{row.ratio}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="real_ratio"
          :label="$t('实际提成比')"
        >
          <template slot-scope="{row}">
            <span>{{row.real_ratio ? row.real_ratio : row.ratio}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          :label="$t('提成金额')"
        ></el-table-column>
        <el-table-column
          prop="role"
          :label="$t('身份')"
        ></el-table-column>
        <el-table-column
          prop="phone"
          :label="$t('手机号')"
        ></el-table-column>
        
        <el-table-column
          prop="status"
          :label="$t('状态')"
        ></el-table-column>
      </el-table>

      <div class="pagination_box ">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogExcel"
      width="30%"
      :before-close="excelClose">
      <span style="height: 5px;">是否导出</span>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="getData('3')">单页</el-button> -->
        <el-button type="primary" @click="getData('4')">导出</el-button>
      </span>
    </el-dialog>
    <agent-list ref="agentList" :type="agentType" @hide="closeAgentList"></agent-list>
    <merchant-list ref="merchantList" :type="merchantType" :agency_id="agent_id" :employee_id="m_employee_id"
      @hide="closeMerchantList"></merchant-list>
    <refresh @click="handleRefresh"></refresh>

  </div>
</template>

<script>
import util from '@/assets/js/util.js'
import { mapState } from 'vuex'
import agentList from "components/agent-list/agent-list.vue";
import merchantList from "components/merchant-list/merchant-list.vue";
export default {
  name: 'order-brokerage',
  components: {
    agentList,
    merchantList
  },
  data() {
    let that = this
    return {
      dialogExcel: false,
      merchant: "",
      merchant_id: "",
      merchantType: 1,
      page: 1,
      page_size: 20,
      total: 0,
      order_id: "",
      agent: "",
      agent_id: 0,
      phone: '',
      clientVal: 0,
      //状态 预备修改 10.25   8是退款
      clientArr: [
        {
          value: 0,
          label: that.$t('选择状态')
        },
        {
          value: 1,
          label: that.$t('待结算')
        },
        {
          value: 2,
          label: that.$t('已结算')
        },
        {
          value: 3,
          label: that.$t('撤销')
        },
        {
          value: 9,
          label: that.$t('充氧宝赔偿')
        },
        {
          value: 8,
          label: that.$t('订单退款')
        },
      ],
      dates: "",
      pickerOptions: {
        shortcuts: [
          {
            text: that.$t("最近一周"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: that.$t("最近一个月"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 3);
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近十二个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit('pick', [start, end]);
            }
          },
        ],
      },
      tableData: [],
    };
  },
  computed: {
    ...mapState(['permissions']),
    m_agency_id() {
      if (this.agentType == 1) {
        return this.agent_id
      } else if (this.agentType == 2) {
        return this.addCabFrom.agent_id
      } else if (this.agentType == 3) {
        return this.bindAgentFrom.agent_id
      }
    },
    m_employee_id() {
      if (this.agentType == 1) {
        return this.salesmanVal
      } else if (this.agentType == 2) {
        return this.addSalesmanVal
      } else if (this.agentType == 3) {
        return this.bindAgentVal
      }
    },
  },
  mounted() {
    let arr = util.getDate('month')
    this.dates = [ arr[0] + ' 00:00:00', arr[1] + ' 23:59:59' ]
    this.getData()
  },
  methods: {
    logExcelA(){
      this.dialogExcel = true;
    },

    excelClose(){
      this.dialogExcel = false;
    },

    openMerchantList(type) {
      this.merchantType = type;
      console.log("选择商户查看代理商id")
      console.log(this.agent_id);
      this.$refs.merchantList.show();
    },
    closeMerchantList(data, type) {
      if (type == 1) {
        this.merchant_id = data.id;
        this.merchant = data.name;
      } else if (type == 2) {
        this.addCabFrom.merchant_id = data.id;
        this.addCabFrom.merchant_name = data.name;
      } else if (type == 3) {
        this.bindAgentFrom.merchant_id = data.id;
        this.bindAgentFrom.merchant_name = data.name;
      }
    },
    clearMerchant(type) {
      if (type == 1) {
        this.merchant_id = "";
        this.merchant = "";
      } else if (type == 2) {
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
      } else if (type == 3) {
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
      }
    },
    closeAgentList(data, type) {
      let employArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      if (type == 1) {
        this.agent_id = data.id;
        this.agent = data.name;
        this.merchant_id = "";
        this.merchant = "";
        console.log("打印一下thisagent_id");
        console.log(this.agent_id);
        // this.getEmployee(data.id, res => {
        //   this.salesmanArr = [...employArr, ...res];
        //   this.salesmanVal = 0;
        // });
      } 
    },
    clearAgent(type) {
      if (type == 1) {
        this.agent_id = "";
        this.agent = "";
        this.merchant_id = "";
        this.merchant = "";
        this.salesmanArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.salesmanVal = 0;
      } else if (type == 2) {
        this.addCabFrom.agent_id = -1;
        this.addCabFrom.agent_name = "";
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
        this.addSalesmanArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.addSalesmanVal = 0;
      } else if (type == 3) {
        this.bindAgentFrom.agent_id = -1;
        this.bindAgentFrom.agent_name = "";
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
        this.bindAgentArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.bindAgentVal = 0;
      }
    },
    openAgentList(type) {
      this.agentType = type;
      this.$refs.agentList.show();
    },
    handleRefresh() {
      let arr = util.getDate('month')
      this.dates = [ arr[0] + ' 00:00:00', arr[1] + ' 23:59:59' ]
      this.page = 1
      this.page_size = 20
      this.order_id = ''
      this.agent = ''
      this.clientVal = 0
      this.phone = ''
      this.getData()
    },
    getData(type) {

      // console.log("打印一下子名称");
      // console.log(this.agent);
      // console.log(this.merchant);
      var name1 = this.agent;
      if(this.merchant!=''){
        name1 = this.merchant;
        
      }
      // else{
      //   this.agent = '';
      // }
      // console.log("打印agent")
      // console.log(this.agent);
      
      if(type=='3'){
          util.$http('/order/brokerageExcel?page=' + this.page, {
            page_size: this.page_size,
            order_no: this.order_id,
            name: name1,
            status: this.clientVal,
            phone: this.phone,
            start_time: this.dates[0] || "",
            end_time: this.dates[1] || "",
            is_excel: 1
          })
        .then(res=>{
          var uel = res.data.substring(13);

          // window.open(res.data.substring(13), '_blank');

          var reg2 = new RegExp("public/"); // 不加'g'，仅删除字符串里第一个"a"
          var a2 = uel.replace(reg2,"");
          console.log(a2);

          window.open('https://'+a2, '_blank');

          // let path=window.location.protocol+'//'+res
          // window.location.href=path
          
          // if(res.code == 1) {

            // this.total = res.data.total
            // this.tableData = res.data.list
            // this.stat = res.data.stat
          // }
        })
      }else if(type == '4'){
        util.$http('/order/brokerageExcel?page=' + this.page, {
            page_size: this.page_size,
            order_no: this.order_id,
            name: name1,
            status: this.clientVal,
            phone: this.phone,
            start_time: this.dates[0] || "",
            end_time: this.dates[1] || "",
            is_excel: 2
          })
        .then(res=>{
          var uel = res.data.substring(13);

          // window.open(res.data.substring(13), '_blank');

          var reg2 = new RegExp("public/"); // 不加'g'，仅删除字符串里第一个"a"
          var a2 = uel.replace(reg2,"");
          console.log(a2);

          window.open('https://'+a2, '_blank');

          // let path=window.location.protocol+'//'+res
          // window.location.href=path
          
          // if(res.code == 1) {

            // this.total = res.data.total
            // this.tableData = res.data.list
            // this.stat = res.data.stat
          // }
        })
      }else{
        if(type == 'search') { this.page = 1 }
        util.$http('/order/brokerage?page=' + this.page, {
          page_size: this.page_size,
          order_no: this.order_id,
          name: name1,
          status: this.clientVal,
          phone: this.phone,
          start_time: this.dates[0] || "",
          end_time: this.dates[1] || "",
        })
        .then(res=>{
          if(res.code == 1) {
            this.total = res.data.total
            var tableData1 = res.data.list
            this.tableData = Object.values(tableData1)
            
          }
        })
      }
    },
    clientChange(val) {
      this.clientVal = val;
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData()
    },
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .date_box {
  width: 630px;
  margin-right: 20px;
}
.head_search .date_box .tip {
  width: 150px;
  margin: 0 0 0 10px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.div_box .content{
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.btn{
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
</style>
